<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{
				width: 250px;
				padding-bottom: 25px;
				box-shadow: 1px 2px 2px  3px #ECECEC;
				margin: 100px auto;
			}
			h3{
				color: seagreen;
				text-indent: 10px;
				padding-top: 10px;
				padding-bottom: 5px;
				border-bottom: 1px dashed #ECECEC;
			}
			.num{
				margin-left: 10px;
				margin-top: 10px;
				margin-right: 8px;
				display: inline-block;
				width: 20px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				background: #FF7E00;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box">
			<h3>本周排行榜</h3>
			<ul id="ul">
				<!--<li>
					<span class="num">1</span>
					<span class="bookName">三国演义</span>
					<span>(文学)</span>
				</li>
				<li>
					<span class="num">1</span>
					<span class="bookName">三国演义</span>
					<span>(文学)</span>
				</li>-->				
			</ul>
		</div>
		<script>
			ajax({
				type:'GET',
				url:'data.xml',
				asny:true,
				data:{
					password:20,
					username:"狗阿迪"
				},
				dataType:"xml",
				success:function(res){
					console.log(res);
					var bookstore = res.getElementsByTagName("bookstore");
					var book = res.getElementsByTagName('book');
					for (var i = 0; i < book.length; i++) {
						for(var e= 0;e < book[i].children.length;e++){
						   console.log(book[i].children[e].textContent);
						   var li = document.createElement('li'),
						   		num = document.createElement('span'),
						   		bookName = document.createElement('span'),
						   		bookType = document.createElement('span');
						   		num.className = 'num';
						   		bookName.className = 'bookName';
						   		
						   		num.innerText = i+1;
						   		bookName.innerText = book[i].children[0].textContent;
						   		bookType.innerText ='(' +book[i].children[1].textContent+')';
						   		
						   		li.appendChild(num);
						   		li.appendChild(bookName);
						   		li.appendChild(bookType);  		
						}
						ul.appendChild(li);
					}
					
				},
				error:function(status){
					console.log(status)
				}
			});
			
			
			function ajax(obj){
				
				var type = obj.type||"GET",//默认为GET
					 url = obj.url,
					 asny = obj.asny !== false,
					 data = '',//预设写入数据
					 dataType = obj.dataType ||"json",
					 success = obj.success,
					 error = obj.error;
					
				var xhr ;
				if(window.XMLHttpRequest()){
					xhr = new XMLHttpRequest();
				}else{
					try{
						xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");
					}catch(e){
						xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");
					}
				}
				//处理data数据  =====> age=20&name=freddy&
				for (var key in obj.data) {
					data += key+"="+obj.data[key]+"&";
				}
				
				if(type.toUpperCase() == 'GET'){
					var d = new Date();
					url +="?"+data+d.getTime();//处理GET相同URL缓存问题
					data = null;
				}
				xhr.open(type,url,asny);
				xhr.setRequestHeader("ContentType","application/x-wwww-form-urlencoded");
				xhr.send(data);
				
				xhr.onreadystatechange = function(){
					if(xhr.readyState==4 && xhr.status == 200){
						var response;
						if(dataType =='text'||dataType == "json"){
							if(dataType == 'json'){//json
								response =  JSON.parse( xhr.responseText );
							}else{//普通文本
								response = xhr.responseText ;
							}
						}else{//xml  
							response = xhr.responseXML;
						}
						success&&success(response)
					}else{//请求失败
						error&&error(xhr.status);
					}					
				}
			}
		</script>
	</body>
</html>
